import React, { useEffect, useState } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';

const Index = () => {

  const [flag,setFlag] = useState(false)

  useEffect(()=>{
    AMapLoader.load({
      key: '46b509be15acb77828c1318e71f9823a', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.ElasticMarker', 'AMap.Marker', 'AMap.Text'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {



          const myMap = new AMap.Map('container', {
          // 设置地图容器id
           viewMode: '2D', // 是否为3D地图模式
           pitch:45, // 地图俯仰角度，有效范围 0 度- 83 度
           zoom: 12, // 初始化地图级别
           center: [120.27081, 30.31160], // 初始化地图中心点位置
        });


        // 添加缩放按钮
        var toolbar = new AMap.ToolBar();
        myMap.addControl(toolbar);

        // 添加比例尺
        const scale = new AMap.Scale()
        myMap.addControl(scale)

        const mark = new AMap.Marker({
          position: [120.27081, 30.31160],
          // icon: 'https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg',
          title: '千峰'
        })
        mark.on('click', (e)=>{
          console.log(e);
          setFlag(true)
        })
        myMap.addControl(mark)


        // 创建纯文本标记
        var text = new AMap.Text({
          text:'你好世界',
          anchor:'center', // 设置文本标记锚点
          draggable:true,
          cursor:'pointer',
          angle:10,
          style:{
              'padding': '.75rem 1.25rem',
              'margin-bottom': '1rem',
              'border-radius': '.25rem',
              'background-color': 'white',
              'width': '15rem',
              'border-width': 0,
              'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'font-size': '20px',
              'color': 'blue'
          },
          position: [120.27081, 30.31160]
        });

        myMap.addControl(text)



        AMap.plugin('AMap.Geolocation', function() {
          var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 10000,          //超过10秒后停止定位，默认：5s
              buttonPosition:'RB',    //定位按钮的停靠位置
              buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

          });
          myMap.addControl(geolocation);
          geolocation.getCurrentPosition(function(status,result){
              if(status=='complete'){
                  onComplete(result)
              }else{
                  onError(result)
              }
          });
      });
      //解析定位结果
      function onComplete(data) {
          document.getElementById('status').innerHTML='定位成功'
          var str = [];
          str.push('定位结果：' + data.position);
          str.push('定位类别：' + data.location_type);
          if(data.accuracy){
               str.push('精度：' + data.accuracy + ' 米');
          }//如为IP精确定位结果则没有精度信息
          str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
          document.getElementById('result').innerHTML = str.join('<br>');
      }
      //解析定位错误信息
      function onError(data) {
          document.getElementById('status').innerHTML='定位失败'
          document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
      }


      })
      .catch(e => {
        console.log(e);
      });
  }, [])

  return (
    <div>
      <h3>高德地图</h3>

      {/* {flag && <div> 商家信息 </div>} */}

      <div id='status'></div>
      <div id='result'></div>

      {/* 初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性； */}
      <div id='container' style={{height: 500}}></div>
    </div>
  );
};

export default Index;
